@mixin flex-column {
  display: flex;
  flex-direction: column;
}
@mixin flex-row {
  display: flex;
  flex-direction: row;
}
.annual-balance-wrap {
  box-sizing: border-box;
  overflow-x: hidden;
  background: #f5f5f5;
  .cart-title-box {
    padding: 24rpx;
    font-size: 28px;
  }
  .loading-animation {
    width: 100%;
    height: 64rpx;
    margin-top: 32rpx;
    position: relative;
    .at-loading__ring {
      border-width: 2px;
    }
  }
  .at-divider__content {
    background-color: #f5f5f5;
    font-size: 24rpx;
  }
  .at-divider__line {
    height: 1rpx;
  }

  .head-wrap {
    position: fixed;
    z-index: 100;
    width: 100%;
    .narbar-wrap {
      @include flex-row;
      justify-content: space-around;
      align-items: center;
      height: 88rpx;
      width: 100%;
      background-color: #ffffff;
      .item {
        color: #999999;
        font-size: 28rpx;
        &.active {
          color: #12b3ff;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            bottom: -10rpx;
            left: 0;
            display: inline-flex;
            width: 100%;
            height: 4rpx;
            border-radius: 2rpx;
            background-color: #12b3ff;
          }
        }
      }
    }
  }
  .btn-wrap {
    position: fixed;
    box-sizing: border-box;
    bottom: 32rpx;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 102;
    padding: 0 24rpx;
    .at-button--disabled {
      background-color: #bbbbbb;
      opacity: 1;
      border: 0;
      border-color: #bbbbbb;
    }
  }
  .content-scroll-wrap {
    box-sizing: border-box;
    padding-top: 180rpx;

    .content {
      box-sizing: border-box;
      padding: 20rpx 24rpx;
      .tab-storetext {
        font-size: 24px;
        color: #12b3ff;
      }
      &.padding {
        padding-bottom: 162rpx;
      }
      &-item {
        border-radius: 12rpx;
        background-color: #ffffff;
        color: #333333;
        font-size: 28rpx;
        &-head {
          @include flex-row;
          align-items: center;
          justify-content: space-between;
          height: 80rpx;
          padding: 0 24rpx;
          .icon-wrap {
            @include flex-row;
            align-items: center;
            .icon {
              width: 44rpx;
              height: 44rpx;
              background: url("./img/card.png");
              background-size: contain;
              margin-right: 12rpx;
            }
          }
          .store {
            font-size: 24rpx;
            color: #666666;
          }
        }
        &-body {
          &-item {
            @include flex-row;
            align-items: center;
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: 228rpx;
            box-shadow: 0px -2rpx 0px #f5f5f5;
            &.checked {
              &::after {
                position: absolute;
                content: "";
                right: 0;
                bottom: 0;
                display: inline-block;
                width: 72rpx;
                height: 56rpx;
                background: url("https://static3.jekunauto.com/img/others/check.png");
                background-size: contain;
                border-radius: 0 0 12rpx 0;
                overflow: hidden;
              }
            }
            &-left {
              // width: 180rpx;
              height: 180rpx;
              padding: 24rpx;
              .banner-img {
                width: 180rpx;
                height: 100%;
                border-radius: 10rpx;
                background-color: #eee;
              }
            }
            &-right {
              position: relative;
              @include flex-column;
              flex: 1;
              justify-content: space-between;
              color: #333333;
              font-size: 26rpx;
              height: 180rpx;
              .top {
                // flex: 1;
              }
              .title {
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                padding-right: 24rpx;
              }
              .specification {
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                padding-right: 24rpx;
                line-height: 1.4;
                max-width: 320rpx;
                margin-top: 14rpx;
                padding: 6rpx 24rpx;
                color: #333333;
                font-size: 24rpx;
                background-color: #f5f5f5;
                border-radius: 10rpx;
              }
              .amount {
                position: absolute;
                right: 0;
                top: 90rpx;
                // margin-top: -22rpx;
                display: inline-block;
                height: 44rpx;
                line-height: 43rpx;
                padding: 0 24rpx;
                border-radius: 24rpx 0 0 24rpx;
                background-color: #d0f0ff;
                color: #12b3ff;
                &.disabled {
                  background-color: #cccccc;
                  color: #999999;
                }
              }
              .date {
                font-size: 20rpx;
                color: #999999;
              }
            }
          }
        }
      }
    }
  }
}
